<script setup lang="ts">
import { reactive, ref, computed, defineEmits } from "vue";
import { onShow,onLoad } from "@dcloudio/uni-app";
import { router, shortenString } from "@/utils/tools";
import { apiOrderBuyList, apiOrderSellList } from "@/apis/order";
import { getImgSrc } from "@/utils/tools";
const emit = defineEmits(['shipNowSell', 'refundSell'])
const props = defineProps({
  orderList: {
    type: Array,
    default: [],
  },
  scene:{
    type: String,
    default: '',
  }
});
const authenticationFilter = computed(() => {
  return (authentication) => {
    if (authentication === '0') {
      return "待认证";
    } else {
      return "已认证";
    }
  };
});
// 5-全部  0-待发货  1-待收货 2-已完成  3-退款售后  4-退款已完成
const sendTypeFilter = computed(() => {
  return (sendType) => {
    if(sendType === 0){
      return "待发货";
    }else if(sendType === 1){
      return "待收货";
    }else if(sendType === 2){
      return "已完成";
    }else if(sendType === 3){
      return "退款中";
    }else if(sendType === 4){
      return "退款完成";
    }
  };
});
const sellDetail =(item:any)=>{
  router(`/pagesOrder/order/detail?id=${item.id}&scene=${props.scene}`)
}
const shipNowSell = (item:any)=>{
  emit('shipNowSell', item)
}
const refundSell = (item:any)=>{
  emit('refundSell', item.id)
}
onShow(() => {
  
});

onLoad((options: any) => {
  
});
</script>
<template>
  <view>
    <view class="card-wrap" v-for="(item,index) in orderList" :key="index">
      <view class="card-name">
        <view class="card-lft">
          <text>收货人：{{item.consumerName}}</text>
          <text class="line">|</text>
          <text>{{item.phone}}</text>
        </view>
        <view class="card-rit">{{sendTypeFilter(item.sendType)}}</view>
      </view>
      <uv-line color="#EEEEEE" margin="30rpx 0"></uv-line>
      <view class="card-info">
        <view class="card-img">
          <image :src="getImgSrc(item)" mode="widthFix" />
        </view>
        <view class="card-title">
          <view class="card-titletop">
            <view class="card-rz">{{authenticationFilter(item.authentication)}}</view>
            <text>
              {{item.title}}
            </text>
          </view>
          <view class="card-price">
            <view class="price-text">
              <text class="price-uni">￥</text>
              <text class="price-num">{{item.currentPrice}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="card-adress" v-if="item.address">
        {{item.address}}
      </view> -->
      <view class="card-adress remark" v-if="item.remark">
        退货原因：{{item.remark}}
      </view>
      <view class="order-date">
        <!-- <view class="date-text">
          <text>下单时间：</text>
          <text>{{item.shoppingTime}}</text>
        </view> -->
        <!-- 0-待发货  1-待收货 2-已完成  3-退款售后  4-退款已完成  -->
        <view class="order-status"  v-if="item.sendType === 0" @click="shipNowSell(item)">立即发货</view>
        <view class="order-status" v-if="item.sendType === 3 && item.status===3" @click="refundSell(item)">确认退款</view>
        <view class="order-status" @click="sellDetail(item)">查看详情</view>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
.card-wrap{
  background: #FFFFFF;
  box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(211,211,211,0.05);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  .card-name{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .card-lft{
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      .line{
        color: #e6e1e1;
        font-size: 28rpx;
        margin: 0 10rpx;
      }
    }
    .card-rit{
      font-weight: 400;
      font-size: 28rpx;
      color: #C7452F;
    }
  }
  .card-info{
    display: flex;
    align-items: top;
    justify-content: space-between;
    .card-img{
      width: 160rpx;
      height: 160rpx;
      border-radius: 14rpx;
      overflow: hidden;
      flex-shrink: 0;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .card-title{
      flex: 1;
      .card-titletop{
        font-size: 28rpx;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 112rpx;
        padding-left: 30rpx;
        .card-rz{
          width: 112rpx;
          padding: 14rpx 10rpx;
          background: #06A8FF;
          font-weight: 400;
          font-size: 22rpx;
          color: #FFFFFF;
          float: left;
          margin: 7rpx 10rpx 10rpx 10rpx;
          text-align: center;
          border-radius: 14rpx 14rpx 30rpx 14rpx;
        }
      }
      .card-price{
        display: flex;
        align-items: center;
        padding-left: 30rpx;
        .price-text{
          display: flex;
          align-items: baseline;
          .price-uni{
            color: #F52121;
            font-size: 24rpx;
            font-weight: bold;
          }
          .price-num{
            color: #F52121;
            font-size: 36rpx;
            font-weight: bold;
          }
        }
        .originalprice{
          font-weight: normal;
          font-size: 26rpx;
          color: #999999;
          text-decoration: line-through;
          margin-left: 16rpx;
        }
      }
    }
  }
  .card-adress{
    background: #F6F6F6;
    border-radius: 8rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #000000;
    padding: 20rpx 24rpx;
    margin-top: 30rpx;
  }
  .remark{
    color:#FF3A30;
  }
  .order-date{
    display: flex;
    align-items: center;
    // justify-content: space-between;
    justify-content: flex-end;
    margin-top: 30rpx;
    .date-text{
      font-weight: normal;
      font-size: 26rpx;
      color: #999999;
    }
    .order-status{
      background: #C7452F;
      border-radius: 50rpx;
      font-weight: normal;
      font-size: 28rpx;
      color: #FFFFFF;
      padding: 14rpx 28rpx;
      margin-left: 20rpx;
    }
  }
}
</style>
